<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Torque on a Disk</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = 200;
        const cy = 250;
        const radius = 100;
        const poa = { x: cx + radius, y: cy }; // Point of Application

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = 'bold 24px sans-serif';

        // 1. Draw the disk (circle)
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the center point
        ctx.beginPath();
        ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
        ctx.fill();

        // 3. Draw dashed lines
        ctx.save();
        ctx.setLineDash([6, 6]);
        ctx.lineWidth = 2;

        // Horizontal dashed line (radius vector)
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(poa.x, poa.y);
        ctx.stroke();
        
        // Vertical dashed line
        ctx.beginPath();
        ctx.moveTo(poa.x, poa.y);
        ctx.lineTo(poa.x, poa.y - 100);
        ctx.stroke();
        ctx.restore();

        // 4. Draw right angle symbol
        ctx.save();
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(poa.x - 20, poa.y);
        ctx.lineTo(poa.x - 20, poa.y - 20);
        ctx.lineTo(poa.x, poa.y - 20);
        ctx.stroke();
        ctx.restore();

        // 5. Draw the force vector 'F'
        // The original diagram is geometrically inconsistent: the vector points up-left,
        // while the angle arc suggests an angle of 60 degrees (up-right).
        // This code reproduces the visual appearance of the diagram, including this inconsistency.
        // The force vector is drawn pointing up-left as it appears in the image.
        const forceLength = 160;
        const forceAngleMath = 145; // Visually approximate angle from image (degrees)
        const forceAngleRad = forceAngleMath * Math.PI / 180;
        const endX = poa.x + forceLength * Math.cos(forceAngleRad);
        const endY = poa.y - forceLength * Math.sin(forceAngleRad); // Use minus because y-axis is inverted in canvas

        // Draw the main line of the vector, slightly thicker to match the original's style
        ctx.save();
        ctx.lineCap = "round";
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(poa.x, poa.y);
        ctx.lineTo(endX, endY);
        ctx.stroke();
        ctx.restore();
        
        // Draw arrowhead
        const arrowAngle = Math.atan2(poa.y - endY, poa.x - endX);
        const arrowSize = 20;
        ctx.beginPath();
        ctx.moveTo(endX, endY);
        ctx.lineTo(endX + arrowSize * Math.cos(arrowAngle - Math.PI / 6), endY + arrowSize * Math.sin(arrowAngle - Math.PI / 6));
        ctx.moveTo(endX, endY);
        ctx.lineTo(endX + arrowSize * Math.cos(arrowAngle + Math.PI / 6), endY + arrowSize * Math.sin(arrowAngle + Math.PI / 6));
        ctx.stroke();
        
        // 6. Draw the angle arc and label "60"
        // The arc is drawn separately to match the diagram, indicating a 60-degree angle
        // from the horizontal, even though the force vector is at a different angle.
        const arcAngleRad = 60 * Math.PI / 180;
        const arcRadiusFor60 = 70;
        
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.arc(poa.x, poa.y, arcRadiusFor60, 0, -arcAngleRad, true); // counter-clockwise
        ctx.stroke();
        ctx.restore();

        // Angle label "60"
        const labelAngleRad = -35 * Math.PI / 180; // Positioned within the 60-degree arc
        const labelRadius = 48;
        ctx.fillText('60', poa.x + labelRadius * Math.cos(labelAngleRad), poa.y + labelRadius * Math.sin(labelAngleRad) + 8);
        
        // 7. Draw the labels 'F' and 'd'
        // Label 'F'
        ctx.fillText('F', endX + 5, endY - 10);
        
        // Label 'd'
        ctx.fillText('d', cx + radius / 2 - 10, poa.y + 35);

    </script>
</body>
</html>